﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Easy Dragger</title>
	<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<link rel="stylesheet" type="text/css" href="demo/demo.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>
	
<!-- codemirror -->
<link rel="stylesheet" href="demo/draggable/CodeMirror/lib/codemirror.css">
<script src="demo/draggable/CodeMirror/lib/codemirror.js" type="text/javascript"></script>
<script src="demo/draggable/CodeMirror/mode/xml/xml.js" type="text/javascript"></script>
<script src="demo/draggable/CodeMirror/mode/javascript/javascript.js" type="text/javascript"></script>
<script src="demo/draggable/CodeMirror/mode/css/css.js" type="text/javascript"></script>
<script src="demo/draggable/CodeMirror/mode/htmlmixed/htmlmixed.js" type="text/javascript"></script>
<style type="text/css"> 
    .icon-import{
	  background:url('demo/draggable/editorIcons/import.gif') no-repeat center center;
     }
	 .icon-save{
	  background:url('demo/draggable/editorIcons/save_edit.png') no-repeat center center;
     }
	 .icon-save-no{
	  background:url('demo/draggable/editorIcons/save_edit_no.png') no-repeat center center;
     }
     [sid]{border: 1px solid #ccc;position:absolute;}
</style>
<style type="text/css">
    .CodeMirror
    {
        height:100%;width:100%;
    }
   .CodeMirror .CodeMirror-scroll
    {
        height:100%;width:100%;
    }
</style>
<script type="text/javascript">
    var codeEditor = null;
    var savedText = "";
    var lastDesignText = "";
    var selectedTabTitle = ""; // 当前模式source/design-mode
    function runCode() {
        var text = codeEditor.getValue();
        var winname = window.open('demo/draggable/SHOW.html', "_blank", '');
        winname.document.open('text/html', 'replace');
        winname.document.write(text);
        winname.document.close();
    }
    function onSelect1(title,index){
	// design-mode
	if(index==1){
	   selectedTabTitle = "design-mode";
	   var codeEditorCurrText = codeEditor.getValue();
	   if(lastDesignText != codeEditorCurrText){
	   	designRepaint();
	   }
	   lastDesignText = codeEditorCurrText;
	}
	// source
	else if(index==0){
	    selectedTabTitle = "source";
	    if(codeEditor){
	    	lastDesignText = codeEditor.getValue();
	    }
 	    if(currComponent){
		// 切换到代码编辑时，根据SID自动选中代码
	   	var sid = $(currComponent).attr('sid');
	   	codeSelection(sid);
	   }
	}
    }
  
    function codeSelection(sid){
	    if(sid){
		var trx = codeEditor.getValue();
		var trxs = trx.split('\n');
	    	var startLineNumber = 0;
		var start_ch = 0;
	     	for(var x=0;x<trxs.length;x++){
		   var start_ch1 = trxs[x].search(sre),sre = new RegExp("<div [^>]*sid=['\"]"+sid+"['\"][^>]*>","i");
		   if(start_ch1 !=-1){
			startLineNumber = Number(x);
			start_ch = start_ch1;
		   }
		}
		var code = getCode(sid,trx,'div');
		var etx = code.split("\n");
		var endLineNumber = startLineNumber + etx.length - 1; 
		var end_ch = etx[etx.length-1].length;
		// alert("from:"+startLineNumber+","+start_ch+" to:"+endLineNumber+","+end_ch);
		codeEditor.setSelection({line:startLineNumber,ch:start_ch},{line:endLineNumber,ch:end_ch});
	    }
    }

    function designRepaint(){
	var codeEditorCurrText = codeEditor.getValue();
	var main = getCode('main',codeEditorCurrText,'div');
	if(!main){
	   return;
	}
	var mainInner = (main = main.replace(/<div [^>]*sid="main"[^>]*>/i,"")).substring(0,main.search(/<\/div>$/gi));	
	$('[sid=main]').html(mainInner);
	// $.parser.parse($('[sid=main]')[0]);
	Parse($('[sid=main]')[0]);
	$('#EditDiv [sid][sid!=main]').draggable({disabled:false,onBeforeDrag:onBeforeDrag,onStopDrag:onStopDrag});
	$('#EditDiv [sid][sid!=main]').resizable({onStartResize:onStartResize,onStopResize:onStopResize});
    }
     
    function updSaveStar(){
		if(codeEditor.getValue()!=savedText){
			updSaveStar1("source * ");
			$('#save').show();$('#nosave').hide();
		}else{
			updSaveStar1("source ");
			$('#nosave').show();$('#save').hide();
		}
    }
    function updSaveStar1(source){
		var p = $('#tab1').tabs().tabs('tabs')[0];
		var mb = p.panel('options').tab.find('a.tabs-inner');
		mb.text(source);
		
    }

   
</script>

</head>
<body>
	<div id="mm1" style="width:150px;">
		<div data-options="iconCls:''" onclick="saveAsLocalHtml('save')"> Save </div>
		<div data-options="iconCls:''" onclick="saveAsLocalHtml('saveas')"> SaveAs </div>
		<div data-options="iconCls:''">  </div>
	</div>
	<div class="easyui-panel" style="padding:0px;">
		<a href="#" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:''">File</a>
		<div style="display:none;"><input id="importBtn" class="easyui-filebox" data-options="onChange:importLocalHtml" style="width:50%"/></div>
		<a href="#" onclick=" $('#importBtn').filebox('button').click(); " class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-import'">Import</a>
		<a id="save" href="#" onclick="saveAsLocalHtml('save');" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'">Save</a>
		<a id="nosave" href="#" onclick="" class="easyui-linkbutton" style="display:none;" data-options="plain:true,disabled:true,iconCls:'icon-save-no'">Save</a>
		<!-- <a href="#" onclick="" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-import'">Import</a> -->
		<a href="#" onclick="runCode();" class="easyui-linkbutton" style="margin-left:10px;" data-options="plain:false,iconCls:''">RUN the source</a>
		<span style="margin-left:10px;">&nbsp;文件:&nbsp;<a id="fPath" href="#"></a><span>
	</div>
	<div id="tab1" class="easyui-tabs easyui-resizable" data-options="tabWidth:112,onSelect:onSelect1" style="width:100%;height:800px;">
	
		<div title="source *" style="padding:10px;">
			<textarea id="text" ></textarea>
		</div>
		
		<div id="design" title="design-mode" style="padding:5px;width:auto;height:auto;">
			<div id="cc" class="easyui-layout" style="width:auto;height:700px;">
				<div data-options="region:'north'" style="height:30px"></div>
				<div data-options="region:'south',split:true" style="height:50px;"></div>
				<div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
				<div data-options="region:'west',split:true" title="West" style="width:150px;padding-left:2px;">
<!-- 在此添加选项 -->
		<ul class="easyui-tree">
			<li>
				<span>My Documents</span>
				<ul>
					<li data-options="state:'open'">
						<span>Buttons</span>
						<ul>
							<li><div class="dragitem" component_id="button">按钮(可拖拽)</div></li>
							<li><div class="dragitem" component_id="Panel">Panel(可拖拽)</div></li>
							<li><div class="dragitem" component_id="tree">Tree(可拖拽)</div></li>
							<li><div class="dragitem" component_id="datagrid">DataGrid(可拖拽)</div></li>
							<li><div class="dragitem" component_id="datebox">datebox(可拖拽)</div></li>
							<li><div class="dragitem" component_id="combobox">combobox(可拖拽)</div></li>
							<li><div class="dragitem" component_id="textbox">输入框(可拖拽)</div></li>
							<li><div class="dragitem" component_id="aaaa">aaa(可拖拽)</div></li>
							<li><div class="dragitem" component_id="bbbb">图片(可拖拽)</div></li>
						</ul>
					</li>
					<li>
						<span>Program Files</span>
						<ul>
							<li><div class="dragitem" component_id="aaaa">aaa(可拖拽)</div></li>
							<li><div class="dragitem" component_id="textbox">输入框(可拖拽)</div></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
					
				</div>
				<div id="EditDiv"  sid="main" style="position:relative;border:1px solid #ccc;" data-options="region:'center',title:'EditDiv'">
				</div>
			</div>
		</div>
	</div>
	
	<!-- 1、拖拽器 -->
	<script type="text/javascript">
		var proxy = null; // 拖拽代理
		var component_id = ''; // 从组件选择区拖拽出组件名
		var currComponent = null; // 当前拖拽的对象
		var lastleft = '',lasttop = '';
		var currentActionMap = {"Resize":false,"Drag":false}; // 当前事件名称“Resize”调整大小中，“Drag”拖动中
		$(function(){
			$("a[href='javascript:void(0)']").attr('href','#');
			$(document).keydown(function(e){
				if(e.keyCode==46&&currComponent){
					// cache4
					editorCachePush();
					codeEditor.setValue( removeCode($(currComponent).attr("sid"),codeEditor.getValue()) );//删除代码
					$(currComponent).remove();//删除组件
				}
			});
			// 全局 Ctrl+S 保存
			$(document).keydown(function(e){
				if(e.keyCode==83&&e.ctrlKey){
					saveAsLocalHtml("save");
				}
			});
			// 设计区undo操作CTRL+Z
			$(document).keydown(function(e){
				if(e.keyCode==90 && e.ctrlKey && selectedTabTitle=="design-mode"){
					codeEditor.undo();
					designRepaint();
				}
			});

			$("#EditDiv").keydown(function(e){
				if (e.keyCode==37) timedMove(e.keyCode);//左 
				else if (e.keyCode==38) timedMove(e.keyCode);//上
 				else if (e.keyCode==39) timedMove(e.keyCode);//右 
				else if (e.keyCode==40) timedMove(e.keyCode);//下
			});
			
			$("#EditDiv").keyup(function(e){
				if (e.keyCode==37) stopMove()//左 
				else if (e.keyCode==38) stopMove();//上
 				else if (e.keyCode==39) stopMove();//右 
				else if (e.keyCode==40) stopMove();//下
			});
			
			$("#text").val($.ajax({url:"demo/draggable/frame.html",async:false}).responseText);

			// 初始化编辑区不能用.text,必须.val
			codeEditor = CodeMirror.fromTextArea($("#text")[0], { mode: "text/html", lineNumbers:false, tabMode: "indent",onChange:updSaveStar, height: "100%", width: "100%" });
			

			// 初始化可拖拽代理区
			$('.dragitem').draggable({
				 revert:true,
				 deltaX:2,
				 deltaY:2,
				 proxy:function(source){
					 var n = $('<div style="position:absolute;border:solid 1px #ccc;"></div>');
					// var com = n.html("sssss").appendTo('body');
					// $.parser.parse(com[0]);
					 component_id = $(source).attr('component_id');
					 var com = n.html($.ajax({url:"demo/draggable/"+component_id+".html",async:false}).responseText).appendTo('body');
					 $.parser.parse(com[0]);
					 return proxy=n;
				 },
				 onStopDrag:function(e){
					// 当代理拖拽停止时,将拖动的组件添加到编辑区
					var DragScopes = $('#EditDiv [sid]').add($('#EditDiv'));
					var parentdiv = findParentInScope(proxy[0],DragScopes);
					if(parentdiv){
						var text = $.ajax({url:"demo/draggable/"+component_id+".html",async:false}).responseText;
						// 为拖拽的组件代码中所有sid属性重新分配值
						text = updateSid(text);
						var v = $(text);
						v.appendTo($(parentdiv)); 
						Parse(v[0]);
						v[0].style.position = 'absolute';
						v[0].style.border = 'solid 1px #ccc';
						v[0].style.left = ($(proxy[0]).offset().left -  $(parentdiv).offset().left-1) + "px";
						v[0].style.top = ($(proxy[0]).offset().top -  $(parentdiv).offset().top-1) + "px";
						//cache1
						editorCachePush();
						try{
							codeEditor.setValue( addCodeTo(text,$(parentdiv).attr('sid'),codeEditor.getValue()) );
							codeEditor.setValue( upPosCode($(v[0]).attr('sid'),v[0].style.left,v[0].style.top,codeEditor.getValue()) );
						}catch(e){alert('prox upPosCode:'+e)}
						v.draggable({disabled:false,onBeforeDrag:onBeforeDrag,onStopDrag:onStopDrag});
						v.resizable({onStartResize:onStartResize,onStopResize:onStopResize});
						v.find('[sid]').draggable({disabled:false,onBeforeDrag:onBeforeDrag,onStopDrag:onStopDrag});
						v.find('[sid]').resizable({onStartResize:onStartResize,onStopResize:onStopResize});
					}
				 }
			 });
		});
		
	
		/**
		 * 开始拖拽组件边框变红,变层为最高层目的是不被其他组件遮挡住
		 */
		function onBeforeDrag(e){
			currentActionMap.Drag=true;
			var d = e.data;
			$(d.target).css("z-index","9999");
			if(currComponent){currComponent.style.borderColor="#ccc";}
			currComponent = d.target;
			lastleft = currComponent.style.left; 
			lasttop = currComponent.style.top;
			d.target.style.borderColor="red";d.target.style.borderWidth="1px";
			$(d.target).parents("[sid][sid!=main]").draggable({disabled:true,onBeforeDrag:onBeforeDrag,onStopDrag:onStopDrag});
			$(d.target).parents("[sid][sid!=main]").resizable({disabled:true});
		}
		/**
		 *  当停止拖拽的时候,判断是否拖拽组件或容器以及逃离了父容器的边界，
		 *	如果脱离，则选择到达的最小容器作为其新父容器
		 */
		function onStopDrag(e){
			var d = e.data;
			$(d.target).css("z-index","0");
			// d.target.style.borderColor="#ccc";
			$(d.target).parents("[sid][sid!=main]").draggable({disabled:false,onBeforeDrag:onBeforeDrag,onStopDrag:onStopDrag});
			$(d.target).parents("[sid][sid!=main]").resizable({disabled:false});
			currentActionMap.Drag=false;
			if(currentActionMap.Resize){
				// 当Resize也在进行的时候明显，Resize的优先级高于Drag，调整大小的时候不应该让Drag发生，所以对于这种双事件相互干扰，直接返回
				return;
			}
			var DragScopes = $('#EditDiv [sid]').add($('#EditDiv'));
			var parentdiv = findParentInScope(d.target,DragScopes);
			if(parentdiv){
				// 父容器内发生了位置的改变更新组件位置
				if($(d.target).parent()[0]==parentdiv && (lastleft != d.target.style.left || lasttop != d.target.style.top)){
					// cache2
					editorCachePush();
					try{
						codeEditor.setValue( upPosCode($(d.target).attr('sid'),d.target.style.left,d.target.style.top, codeEditor.getValue() ) );
					}catch(e){alert('upPosCode:'+e)}
				}else if($(d.target).parent()[0]!=parentdiv){
					// 父容器归属改变更新组件位置
					// cache2
					editorCachePush();
					try{
						d.target.style.left = ($(d.target).offset().left -  $(parentdiv).offset().left - 1) + "px";
						d.target.style.top = ($(d.target).offset().top -  $(parentdiv).offset().top - 1) + "px";
						parentdiv.appendChild(d.target);
						codeEditor.setValue( upPosCode($(d.target).attr('sid'),d.target.style.left,d.target.style.top,codeEditor.getValue()) );
						codeEditor.setValue( moveCodeTo($(d.target).attr('sid'),$(parentdiv).attr('sid'),codeEditor.getValue()) );
					}catch(e){alert('upPosCode moveCodeTo:'+e)}
				}
				
			}	
		};
		
		/**
		 * 调整大小而已
		 */
		function onStartResize(e){
			currentActionMap.Resize=true;
		}
		function onStopResize(e){
			currentActionMap.Resize=false;
			var d = e.data;
			var width = d.target.style.width;
			var height = d.target.style.height;
			// cache3
			editorCachePush();
			// $.parser.parse(d.target);
			Parse(d.target);
			try{
				codeEditor.setValue( upSizeCode($(d.target).attr('sid'),width,height,codeEditor.getValue()) );
			}catch(e){alert('upSizeCode:'+e)}
		}

		/* 按下上下左右键调整位置  */
		var t = null;
		function timedMove(keyCode){
		  if (keyCode==37) comMove(currComponent,"LEFT",-1);//左 
		  else if (keyCode==38) comMove(currComponent,"TOP",-1);//上
 		  else if (keyCode==39) comMove(currComponent,"LEFT",1);//右 
		  else if (keyCode==40) comMove(currComponent,"TOP",1);//下
		  t=setTimeout("timedMove",100);
		}
		// dom元素，方向 "TOP,LEFT", 距离像素Number
		function comMove(com,direction,distance){
			if(!com) return;
			if(direction=="TOP"){
			   var topNumber = Number(com.style.top.replace("px",""));
			   com.style.top = topNumber + distance + "px";
			   
			}
			if(direction=="LEFT"){
			   var leftNumber = Number(com.style.left.replace("px",""));
			   com.style.left = leftNumber + distance + "px";
			}
		}
		
		/* 停止移动 */
		function stopMove(){
		   clearTimeout(t);
		   
		   if(currComponent){
		     try{
			  codeEditor.setValue( upPosCode($(currComponent).attr('sid'),currComponent.style.left,currComponent.style.top, codeEditor.getValue() ) );
		     }catch(e){alert('upPosCode:'+e)}
		   }
		}

		
		/** 
		  *	返回最小包含父容器方法
		  * 查看target元素落在了什么容器范围之内,如果多个容器范围都包含它则取小的那一个容器.
		  * @target 拖动元素
		  * @containers 用于寻找是否位置包含拖动元素target位置的容器集合
		  * @return 返回最小(宽度最小)包含父容器
		  */
		function findParentInScope(target,containers){
			var parentdiv = null;
			containers.each(function(){
				if(target!=this){
					if($(this).offset().left < $(target).offset().left)
					if($(this).offset().left + $(this).width() > $(target).offset().left + $(target).outerWidth())
					if($(this).offset().top < $(target).offset().top)
					if(($(this).offset().top + $(this).height()) > ($(target).offset().top + $(target).outerHeight()))
					if(parentdiv == null || $(this).width()<$(parentdiv).width()){
						parentdiv = this;
					}
			}});
			return parentdiv;
		}	
	
		/**
		 *  更新组件代码text中的所有sid值为唯一值
		 */
		function updateSid(text){
			var newsid = getSidCode();
			var sids = text.split(/sid=["'].*?["']/i);
			var newtext = "";
			for(var i=0;i<sids.length;i++){
				if(i==0){
					newtext = newtext + sids[i];
				}else{
					newtext = newtext + "sid=\""+(newsid++)+"\"" + sids[i];
				}
			}
			return newtext;	
		}
		function getSidCode(){
			var maxCode = 0;
			$('[sid][sid!=main]').each(function(){
				var sidNumber = Number($(this).attr('sid'));
				if( sidNumber > maxCode){
					maxCode = sidNumber;
				}
			});
			return maxCode+1;
		}
	</script>
	
	<!-- 2、代码修改器 -->
	<script>
			// element代码根据sid提取
			function getCode(sid,str,ele){
			   try{
				var regexi = null;
				if(sid){
					regexi = new RegExp("<"+ele+"[^>]*sid=\""+sid+"\"[^>]*>","i");
				}else{
					regexi = new RegExp("<"+ele+"[^>]*>","i");
				}
				var sidindex = str.search(regexi);
				var sidStr = str.substring(sidindex);
				var regex3 = new RegExp("a?(<"+ele+"[^>]*\/>)|b?(<"+ele+"[^>]*>)|c?(</"+ele+">)","gi");	
				var arr = [],result = "";
				while ((result = regex3.exec(sidStr)) != null){
				  var group = (result[1]?"a":"")+(result[2]?"b":"")+(result[3]?"c":"");
				  arr.push({result:result[0],lastIndex:regex3.lastIndex,group:group});
				}
				if(arr[0].group=="a"){// sid是闭合标签直接返回
					return arr[0].result;
				}else if(arr[0].group=="b"){// sid不是闭合标签按平衡算法继续
					var numDivStart=0,numDivClose=0;// 开闭的量
					for(var i=1;i<arr.length;i++){
						if(arr[i].group=="b"){
							numDivStart = numDivStart+1; // 开 + 1
						}else if(arr[i].group=="c"){
							// 当闭合标签出现时，如果前面的闭合标签量平衡(numDivStart==numDivClose)，则返回以当前闭合标签结尾的字符串
							if(numDivStart==numDivClose){
								return sidStr.substring(0,arr[i].lastIndex);
							}
							numDivClose = numDivClose+1;// 闭 + 1
						}
					}
				}
			     }catch(e){ alert("[没有找到指定的sid="+sid+"区域]\n"+e.message);
			   }
				return null;
			}
			
			// 添加代码str1到sid中
			function addCodeTo(str1,sid,str){
				var sid1str = str1;
				var sid2str = getCode(sid,str,'div');
				// 将拖拽的代码appendTo到sid中拼接成它的子元素
				var sid2newstr = sid2str.substring(0,sid2str.search(/<\/div>$/i));
				// 将拼接的新sid2代码更新
				sid2newstr = sid2newstr +"\r\n" + sid1str + "\r\n</div>";
				str = str.replace(sid2str,sid2newstr);
				return str;
			}
			
			// 将当前拖动的sid1的元素添加到sid2元素中成为它(sid2)的子元素
			function moveCodeTo(sid1,sid2,str){
				var str1 = str;
				try{				
					// 删除sid1原来的代码
					var sid1str = getCode(sid1,str,'div');
					str1 = str1.replace(sid1str,"");
					// 将sid1的代码appendTo到sid2中拼接成它的子元素
					var sid2str = getCode(sid2,str1,'div');
					var sid2newstr = sid2str.substring(0,sid2str.search(/<\/div>$/i));
					// 将拼接的新sid2代码更新,并逐行退格以格式化
					sid2newstr = sid2newstr +"\n" + sid1str + "\n</div>";
					str1 = str1.replace(sid2str,sid2newstr);
					return str1;
				}catch(e){alert(e);return str}
				return str1;
			}
			
			// 删除组件
			function removeCode(sid,str){
				var str1 = str;
				try{
					// 删除sid1的代码
					var sidstr = getCode(sid,str1,'div');
					str1 = str1.replace(sidstr,"");
				}catch(e){alert("removeCode:"+e);return str;};
				return str1;
			}
			
			// 更新元素绝对位置Style信息例position:absolute;left:99px;top:100px;
			function upPosCode(sid,left,top,str){
				var regex3 = new RegExp("<div [^>]*sid=\""+sid+"\"[^>]*>","gi");				
				var groups = str.match(regex3);
				var newgroup = groups[0];
				if(groups){
					//newgroup = newgroup.replace(/position\s*:[^"]*?;/i,"");
					newgroup = newgroup.replace(/left\s*:[^"]*?;/i,"");
					newgroup = newgroup.replace(/top\s*:[^"]*?;/i,"");
					var stylegp = newgroup.match(/style=["'].*?["']/i);
					if(!stylegp){//当无style样式时，追加style
						//newgroup = newgroup.replace(/>$/," style=\"position:absolute;left:"+left+";top:"+top+";\">");
						newgroup = newgroup.replace(/>$/," style=\"left:"+left+";top:"+top+";\">");
						//alert();
					}else{//当有style样式时，追加style的postion属性
						//var newstyle = stylegp[0].replace(/"$/,"position:absolute;left:"+left+";top:"+top+";\"");
						var style = stylegp[0].replace(/;"$/,"\"").replace(/"$/,";\"");
						var newstyle = style.replace(/"$/,"left:"+left+";top:"+top+";\"");
						newgroup = newgroup.replace(stylegp,newstyle);
					}
				}
				return str.replace(groups[0],newgroup);
			}
			
			// 更新元素绝对位置Style信息例position:absolute;left:99px;top:100px;
			function upSizeCode(sid,width,height,str){
				var regex3 = new RegExp("<div [^>]*sid=\""+sid+"\"[^>]*>","gi");
				var groups = str.match(regex3);
				var newgroup = groups[0];
				if(groups){
					newgroup = newgroup.replace(/width\s*:[^"]*?;/i,"");
					newgroup = newgroup.replace(/height\s*:[^"]*?;/i,"");
					var stylegp = newgroup.match(/style=["'][^"]*?["']/i);
					if(!stylegp){//当无style样式时，追加style
						newgroup = newgroup.replace(/>$/," style=\"width:"+width+";height:"+height+";\">");
						//alert();
					}else{//当有style样式时，追加style的sizes属性
						var style = stylegp[0].replace(/;"$/,"\"").replace(/"$/,";\"");
						var newstyle = style.replace(/"$/,"width:"+width+";height:"+height+";\"");
						newgroup = newgroup.replace(stylegp,newstyle);
					}
				}
				return str.replace(groups[0],newgroup);
			}
		</script>

		<!-- 3、编辑缓存器 -->
		<script>
			var editorCache = []; // 页面缓存数组用于CTRLZ回退
			function editorCachePush(){
			}
			function editorCachePop(){
			}
		</script>
		
		<!-- 4、转换器 -->
		<script>
			function Parse(com){
			  if(com){
				$.parser.parse(com);
				Optimize(com);
			  }
			}
		</script>

		<!-- 5、hta支持优化器 -->
		<script>
			function Optimize(com){
			   $(com).find("a[href='javascript:void(0)']").attr('href','#');
			}
		</script>

		<!-- 6、硬盘加载保存器 Hta上执行有效 -->
		<script>
			var currFilePath = "";
			
			// 将设计后的源代码保存
			function saveAsLocalHtml(saveType){
			   try{
			    if(!codeEditor){
					return;
				}
			    var text = codeEditor.getValue();
			    if(!document.frames['doc1']){
			    	$('body').append('<iframe name="doc1" style="display:none;" src=""></iframe>');
			    }
			    var document1 = document.frames['doc1'].document;
       	 		    document1.open('text/html', 'replace');		    
        		    document1.write(text);
			    var fPath = $("#fPath").text();
			    if(saveType=="saveas" || (saveType=="save" && !fPath)){
					var rst = document1.execCommand('SaveAs',true,!fPath ? 'xxxx' : fPath);
					if(rst==true){
					  // savedText = text;
					  // updSaveStar1("source");
					  $('#nosave').show();$('#save').hide();
					  if (confirm("文件被另存为,需要重新载入"))
					  $('#importBtn').filebox('button').click();
					}
			    }else if(saveType=="save"){
					var rst = document1.execCommand('SaveAs',false,fPath);
					if(rst==true){
					  savedText = text;
					  updSaveStar1("source");
					  $('#nosave').show();$('#save').hide();
					}
				}
        		document1.close();
			   }catch(e){ alert(e.message+"[保存失败]")}
			}
			
			function importLocalHtml(newValue,oldValue){
				if(!newValue || newValue.search(/html|htm/i)==-1){
					alert("文件只能为html,htm!");
					return;
				}
				try{ 
				    var text = $.ajax({url:"file:////"+newValue.replace(/\\/g,"/"),async:false}).responseText;
				    if(!text){
				    	text = $.ajax({url:newValue,async:false}).responseText;
				    }
				    if(!text){
					alert('当前浏览器环境不支持载入!');
					return;
				    }
				    codeEditor.setValue(text);
				    $("#fPath").text(newValue);
				    savedText = codeEditor.getValue();
				    updSaveStar1("source");
					$('#nosave').show();$('#save').hide();
				}catch(e){
				   alert(e.message+"[载入出错]"); return;
				}
				designRepaint();
			}

		</script>
		
	
</body>
</html>